<template>
  <a-locale-provider :locale="locale">
  <a-layout id="components-layout-demo-side" style="min-height: 100vh">
    <a-layout-sider
            collapsible

    >
      <div class="logo" />
      <a-menu theme="dark" :openKeys="openKeys"
              @openChange="onOpenChange" mode="inline">
        <a-sub-menu key="sub0">
          <span slot="title"><a-icon type="dashboard" /><span>控制中心</span></span>
          <a-menu-item key="21">控制台</a-menu-item>
          <a-menu-item key="22">数据监控</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub1">
          <span slot="title"><a-icon type="hdd" /><span>空间管理</span></span>
          <a-menu-item key="1">Option 1</a-menu-item>
          <a-menu-item key="2">Option 2</a-menu-item>
          <a-menu-item key="3">Option 3</a-menu-item>
          <a-menu-item key="4">Option 4</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <span slot="title"><a-icon type="user" /><span>用户管理</span></span>
          <a-menu-item key="5">管理员</a-menu-item>
          <a-menu-item key="6">角色管理</a-menu-item>
          <a-menu-item key="7">权限管理</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub4">
          <span slot="title"><a-icon type="github" /><span>项目中心</span></span>
            <a-menu-item key="9">环境管理</a-menu-item>
          <a-menu-item key="10">服务器管理</a-menu-item>
          <a-menu-item key="11">项目管理</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub5">
          <span slot="title"><a-icon type="setting" /><span>插件管理</span></span>
          <a-menu-item key="13">插件安装</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0" />
      <a-layout-content style="margin: 0 16px">
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>Home</a-breadcrumb-item>
          <a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item>
          <a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item>
          <a-breadcrumb-item>An Application</a-breadcrumb-item>
        </a-breadcrumb>
        <div :style="{ padding: '5px', minHeight: '360px' }">
          <!--<a-card title="Card Title">-->
            <!--<a href="#" slot="extra">more</a>-->
            <!--<p>card content</p>-->
            <!--<p>card content</p>-->
            <!--<p>card content</p>-->
          <!--</a-card>-->
          <a-form
            :form="form"
            @submit="handleSubmit">
            <a-card title="基本配置" :bordered="false">
                <a-row>
                  <a-col :span="9">
                    <a-form-item label="项目名称">
                      <a-input
                        v-decorator="[
                          'username',
                          {
                            rules: [{ required: true, message: 'Username is required!' }],
                          }
                        ]"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :xs="{ span: 12, offset: 1 }" :lg="{ span: 9, offset: 2 }">
                    <a-form-item label="环境">
                      <a-select defaultValue="lucy" @change="handleChange">
                        <a-select-option value="jack">Jack</a-select-option>
                        <a-select-option value="lucy">Lucy</a-select-option>
                        <a-select-option value="disabled" disabled>Disabled</a-select-option>
                        <a-select-option value="Yiminghe">yiminghe</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                </a-row>

                <a-row>
                  <a-col :span="9">
                    <a-form-item label="Git Repo">
                      <a-input
                        v-decorator="[
                          'username',
                          {
                            rules: [{ required: true, message: 'Username is required!' }],
                          }
                        ]"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :xs="{ span: 12, offset: 1 }" :lg="{ span: 9, offset: 2 }">
                    <a-form-item label="分支/tag">
                      <a-select defaultValue="lucy" @change="handleChange">
                        <a-select-option value="jack">Jack</a-select-option>
                        <a-select-option value="lucy">Lucy</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                </a-row>
              <!--</a-form>-->
            </a-card>

            <a-card title="目标集群" :bordered="false" style="margin-top: 10px">
              <a-transfer
                :dataSource="mockData"
                showSearch
                :listStyle="{
                  width: '45%',
                  height: '300px',
                }"
                :filterOption="filterOption"
                :targetKeys="targetKeys"
                @change="handleChange"
                @search="handleSearch"
                :render="item=>item.title"
              >
                <a-button
                  size="small"
                  style="float:right;margin: 5px"
                  @click="getMock"
                  slot="footer"
                  slot-scope="props"
                >
                  <a-icon type="sync" />
                </a-button>

                <span
                  slot="notFoundContent"
                >
                  没数据
                </span>
              </a-transfer>
              <a-row style="margin-top: 20px">
                <a-col :span="6">
                  <a-form-item label="目标集群部署路径">
                    <a-input
                            v-decorator="[
                        'username',
                        {
                          rules: [{ required: true, message: 'Username is required!' }],
                        }
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :xs="{ span: 6, offset: 1 }" :lg="{ span: 6, offset: 2 }">
                  <a-form-item label="目标集群部署仓库">
                    <a-input
                            v-decorator="[
                        'username',
                        {
                          rules: [{ required: true, message: 'Username is required!' }],
                        }
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :xs="{ span: 6, offset: 1 }" :lg="{ span: 6, offset: 2 }">
                  <a-form-item label="目标集群部署仓库版本保留数">
                    <a-input-number style="width: 100%" :min="1" :max="10" v-model="value" @change="onChange" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
            <a-card title="任务配置" :bordered="false" style="margin-top: 10px">
              <a-row style="margin-top: 20px">
                <a-col :span="9">

                  <a-form-item label="部署排除文件">
                    <a-radio-group style="float: left;margin-top: -40px; margin-left: 150px" name="radioGroup" :defaultValue="1">
                      <a-radio :value="1">排除</a-radio>
                      <a-radio :value="2">包含</a-radio>
                    </a-radio-group>
                    <a-textarea placeholder="" :rows="4"/>
                  </a-form-item>
                </a-col>
                <a-col :xs="{ span: 2, offset: 1 }" :lg="{ span: 2, offset: 1 }">

                </a-col>
                <a-col :xs="{ span: 9, offset: 1 }" :lg="{ span: 9, offset: 2 }">
                  <a-form-item label="自定义全局变量">
                    <a-textarea placeholder="" :rows="4"/>
                  </a-form-item>
                </a-col>
              </a-row>

              <a-row style="margin-top: 20px">
                <a-col :span="9">
                  <a-form-item label="高级任务-Deploy前置任务">
                    <a-textarea placeholder="" :rows="4"/>
                  </a-form-item>
                </a-col>
                <a-col :xs="{ span: 2, offset: 1 }" :lg="{ span: 2, offset: 1 }">

                </a-col>
                <a-col :xs="{ span: 9, offset: 1 }" :lg="{ span: 9, offset: 2 }">
                  <a-form-item label="高级任务-Deploy后置任务">
                    <a-textarea placeholder="" :rows="4"/>
                  </a-form-item>
                </a-col>
              </a-row>

              <a-row style="margin-top: 20px">
                <a-col :span="9">
                  <a-form-item label="高级任务-Release前置任务">
                    <a-textarea placeholder="" :rows="4"/>
                  </a-form-item>
                </a-col>
                <a-col :xs="{ span: 2, offset: 1 }" :lg="{ span: 2, offset: 1 }">

                </a-col>
                <a-col :xs="{ span: 9, offset: 1 }" :lg="{ span: 9, offset: 2 }">
                  <a-form-item label="高级任务-Release后置任务">
                    <a-textarea placeholder="" :rows="4"/>
                  </a-form-item>
                </a-col>
              </a-row>

              <a-button
                      type="primary"
                      @click="check"
              >
                提交
              </a-button>
            </a-card>

          </a-form>
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </a-layout>
  </a-locale-provider>
</template>
<script>
    import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
    export default {
        data () {
            return {
                locale: zhCN,
                rootSubmenuKeys: ['sub0', 'sub1', 'sub2', 'sub4'],
                openKeys: ['sub0'],
                mockData: [],
                targetKeys: [],
                value: 8
            };
        },
        mounted() {
            this.getMock()
        },
        methods: {
            onOpenChange (openKeys) {
                const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
                if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
                    this.openKeys = openKeys
                } else {
                    this.openKeys = latestOpenKey ? [latestOpenKey] : []
                }
            },
            getMock() {
                const targetKeys = [];
                const mockData = [];
                for (let i = 0; i < 20; i++) {
                    const data = {
                        key: i.toString(),
                        title: `content${i + 1}`,
                        description: `description of content${i + 1}`,
                        chosen: Math.random() * 2 > 1,
                    };
                    if (data.chosen) {
                        targetKeys.push(data.key);
                    }
                    mockData.push(data);
                }
                this.mockData = mockData
                this.targetKeys = targetKeys
            },
            filterOption(inputValue, option) {
                return option.description.indexOf(inputValue) > -1;
            },
            handleChange(targetKeys, direction, moveKeys) {
                console.log(targetKeys, direction, moveKeys);
                this.targetKeys = targetKeys
            },
            handleSearch (dir, value) {
                console.log('search:', dir, value);
            },
        },
    }
</script>

<style>
  #components-layout-demo-side .logo {
    height: 32px;
    background: rgba(255,255,255,.2);
    margin: 16px;
  }
</style>